<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>W3Cschool教程 React 实例</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="//www.w3cschool.cn/statics/assets/react/react.min.js"></script>
    <script src="//www.w3cschool.cn/statics/assets/react/react-dom.min.js"></script>
    <script src="//www.w3cschool.cn/statics/assets/react/babel.min.js"></script>
    <script type="text/javascript" src="/js/test.js"></script>
    <script type="text/babel" src="/js/testreact.jsx"></script>
    <script type="text/babel" src="/js/reactmenu.jsx"></script>
</head>
<body>
<div id="menu"></div>
<div id="example"></div>

<div id="example1"></div>

<script type="text/babel">
    /*
        class App extends React.Component {


            render=function(){


                return (
                    <div>
                        <h2>Hello Worddddld!</h2>
                        <button id="button1" onClick={this.handClick} >hello</button>
                    </div>
                )
            }
            handClick= function () {
                alert("click");
            }
        }



     */

    ReactDOM.render(
        <Toggle/>,
        document.getElementById('example')
    );
    try {
        ReactDOM.render(<Sider/>, document.getElementById('menu'));
    } catch (e) {
        alert(e);
    }
    //ReactDOM.render(<App />, document.querySelector('#example'));
    ReactDOM.render(<App1/>, document.querySelector('#example1'));

    var data = {"key1": "hello1", "key2": "hello2", "key3": "hello3"};
    var vvv = ["vvvhello1", "vvvhello2", "vvvhello3"];

    try {
        ReactDOM.render(
            <Hello/>,
            document.getElementById('example1')
        );
    } catch (e) {
        alert(e);
    }


</script>
</body>
<script>


</script>
</html>